<template>
  <transition name="fade">
    <div class="container">
      <div class="box">
          <header class="header">
            <router-link tag="div" to="/" class="iconfont icon-zuojiantou1"></router-link>
            <span>菜谱分类</span>
            <router-link tag="div" to="/search" class="iconfont icon-sousuo"></router-link>
          </header>
          <div class="content">
            <template>
              <el-tabs :tab-position="tabPosition" style="height: 200px;">
                <el-tab-pane label="热门">
                  <div class="classification">
                    <div class="head">
                      <p>热门食材</p>
                      <img src="./../assets/food2.jpg" alt="">
                    </div>
                    <ul class="content">
                      <li>面条</li>
                      <li>豆腐</li>
                      <li>土豆</li>
                      <li>排骨</li>
                      <li>排骨</li>
                      <li>排骨</li>
                      <li>排骨</li>
                      <li>排骨</li>
                      <li>排骨</li>
                    </ul>
                  </div>
                  <div class="classification">
                    <div class="head">
                      <p>热门食材</p>
                      <img src="./../assets/food2.jpg" alt="">
                    </div>
                    <ul class="content">
                      <li>面条</li>
                      <li>豆腐</li>
                      <li>土豆</li>
                      <li>排骨</li>
                      <li>排骨</li>
                      <li>排骨</li>
                      <li>排骨</li>
                      <li>排骨</li>
                      <li>排骨</li>
                    </ul>
                  </div>
                  <div class="classification">
                    <div class="head">
                      <p>热门食材</p>
                      <img src="./../assets/food2.jpg" alt="">
                    </div>
                    <ul class="content">
                      <li>面条</li>
                      <li>豆腐</li>
                      <li>土豆</li>
                      <li>排骨</li>
                      <li>排骨</li>
                      <li>排骨</li>
                      <li>排骨</li>
                      <li>排骨</li>
                      <li>排骨</li>
                    </ul>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="蔬菜">
                  <div class="classification">
                    <div class="head">
                      <p>绿叶蔬菜</p>
                      <img src="./../assets/food2.jpg" alt="">
                    </div>
                    <ul class="content">
                      <li>西兰花</li>
                      <li>大白菜</li>
                      <li>菠菜</li>
                      <li>芹菜</li>
                      <li>芹菜</li>
                      <li>芹菜</li>
                      <li>芹菜</li>
                      <li>芹菜</li>
                      <li>芹菜</li>
                      <li>芹菜</li>
                      <li>芹菜</li>
                      <li>芹菜</li>
                      <li>芹菜</li>
                    </ul>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="肉类大全">
                  <div class="classification">
                    <div class="head">
                      <p>热门食材</p>
                      <img src="./../assets/food2.jpg" alt="">
                    </div>
                    <ul class="content">
                      <li>配</li>
                      <li>配置</li>
                      <li>配置管</li>
                      <li>配置管理</li>
                    </ul>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="定时任务补">
                  <div class="classification">
                    <div class="head">
                      <p>热门食材</p>
                      <img src="./../assets/food2.jpg" alt="">
                    </div>
                    <ul class="content">
                      <li>配</li>
                      <li>配置</li>
                      <li>配置管</li>
                      <li>配置管理</li>
                    </ul>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="定时任务补">
                  <div class="classification">
                    <div class="head">
                      <p>热门食材</p>
                      <img src="./../assets/food2.jpg" alt="">
                    </div>
                    <ul class="content">
                      <li>配</li>
                      <li>配置</li>
                      <li>配置管</li>
                      <li>配置管理</li>
                    </ul>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </template>
          </div>
      </div>
    </div>
  </transition>
</template>

<script>
import Vue from 'vue'
export default {
  data () {
    return {
      title: '',
      tabPosition: 'left',
      addable: true,
    }
  },
  methods: {
    back () {
      this.$router.go(-1)
    }
  },
  mounted () {
    const { id } = this.$route.params
    fetch(`/daxun/detail?id=${id}`).then(res => res.json())
      .then(data => {
        // this.title = data[0].title
        // this.img = data[0].images.small
      })
  }
}
</script>

<style lang="scss" scoped>
.header {
  display: flex!important;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  .icon-zuojiantou1 {
    margin-left: 15px;
  }
  .icon-sousuo {
    margin-right: 15px;
  }
  span {
  }
}
.content {
  margin-top: 10px;
  .el-tabs {
    height: auto!important;
    
    .el-tabs__content {
      .classification {
        .head {
          width: 100%;
          height: 40px;
          display: flex;
          justify-content: space-around;
          align-items: center;
          background: rgb(214, 113, 113);
          border-radius: 3px;
          p {
          }
          img {
            width: 30px;
          }
        }
        .content {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          li {
            border: 1px solid #ccc;
            border-radius: 3px;
            line-height: 33px;
            text-align: center;
            margin-bottom: 10px;
            width: 78px;
            height: 33px;
          }
        }
      }
    }
  }
}
</style>

<style lang="scss">
.el-tabs__header {
  .el-tabs__nav {
    .el-tabs--left, .el-tabs__item {
      padding: 0 10px!important;
      text-align: left!important;
    }
  }
}
.el-tabs__content {
  margin-right: 10px;
  height: 100%;
}
</style>
